<template>
  <div class="page-container" style="min-height: 55rem;">
    <page_breadcrumb pageOption :getKeyMethod="init_table_model" @change="change_table_model"
      modelPath="tableOption.model" />
    <audio ref="error_audio">
      <source src="../../../asset/error_audio.wav" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
    <el-form label-position="right" ref="formSearch" onsubmit="return false" :rules="rules" :model="{}">

      <el-form-item class="mg_t2 " prop="searchCode"
        :label="$tt(['label_sku_only_code', 'label_return_order_sku_code'], '/')">

        <div class="flex_row_center ">

          <scan_input v-model.trim="searchCode" @enterInput="scanSkuCode" style="width:400px"
            class="form_input_default mg_l1" autofocus />
          <el-button class="mg_h2" @click="scanSkuCode" type="primary" style="width:110px">
            {{ $tt('label_scan') }}</el-button>
          <el-checkbox class="mg_h2" :value="autoPrint" border @change="changeAutoPrint">
            {{ $tt('label_auto_print') }}
          </el-checkbox>
        </div>
      </el-form-item>
    </el-form>

    <ex_super_table class="main-table " v-bind="tableOption" :data="tableData" :autoFlex="true" :autoPage="false"
      :specialStyle="false">
    </ex_super_table>
    <print_common_temp ref="print_common_temp" businessType="SKU" :metaHandler="(data, it) => {
      return _.pick(it, ['skuName', 'skuNameEn', 'skuOnlyCode'])
    }" :tableModel="[
        { key: 'skuName', label: 'label_sku_name', 'width': 120, 'show-overflow-tooltip': true, },
        { key: 'skuBarcode', label: 'label_sku_code', 'min-width': 120, 'show-overflow-tooltip': true, },
        { key: 'skuOnlyCode', label: 'label_sku_only_code', 'min-width': 150, },
      ]"/>

    <print_config_dialog ref="print_config_dialog" printType="SKU" @saveConfig="saveConfig" />

  </div>
</template>
<script>
import print_common_temp from '@/component/print/print_common_temp'
import print_config_dialog from "@/component/print/common_print_config_dialog.vue"

import superTablePageFunction from '@/mixin/super-table-page-function';

import page_table_model_manage from '@/mixin/page_table_model_manage';
export default {
  title: "label_return_order_sku_change_mark",
  mixins: [superTablePageFunction, page_table_model_manage],
  components: { print_common_temp, print_config_dialog, },
  data() {
    return {
      searchCode: '',
      rules: {
        searchCode: {
          required: true, trigger: 'blur',
          validator: (r, v, cb) => {
            if (_.isEmpty(this.searchCode)) {
              return cb(this.$tt('tip_can_no_empty'))
            }
            cb()
          }
        },
      },
      autoPrint: false,
      autoMeasure: true,


      tableData: [],
      tableOption: {
        model: this.init_table_model(),
      },


    };
  },

  mounted() {

    let localConfig = window.localStorage.getItem('returngood_change_mark>config')
    if (localConfig) {
      try {
        localConfig = JSON.parse(localConfig)
        this.autoPrint = !!localConfig.autoPrint
      } catch (e) {
      }
    }

    if (this.autoPrint) {
      const printConfig = _.head(this.$refs.print_config_dialog.loadPrintConfig({ typeKey: "SKU" }))
      if (!printConfig || !printConfig.clientId || !printConfig.templateId) {
        this.autoPrint = false
      }
    }
    //////////////////


  },
  methods: {
    configChange() {
      const data = {
        autoPrint: this.autoPrint,
      }
      window.localStorage.setItem('returngood_change_mark>config', JSON.stringify(data))
    },

    option_table_model() {
      return [
        {
          key: 'customerName', label: 'label_customer_info', 'min-width': 180, 'show-overflow-tooltip': true, keyShow: 'expandDesc',
          attrs: {
            formatter: (r, c, v, i) => this.$formatNameCode(v, r.customerCode)
          }
        },
        {
          key: 'skuOnlyCode', label: 'label_sku_only_code', 'min-width': 180,
          render: (h, { row, column }) => {
            const code = row[column.property]
            if (!code) return this.$tt('data_temp_none')
            return (<text_extra_tooltip_operate extra_barcode_image extra_text_align='center'
              value={code}
              data_type={column.property} data_id={row.id}
            />)
          },
        },
        { key: 'skuBarcode', label: 'label_sku_code', 'min-width': 150, 'show-overflow-tooltip': true, },

        { key: 'skuName', label: 'label_sku_name', 'show-overflow-tooltip': true, },
        {
          key: 'skuDeclaredValue', label: 'label_declared_value', 'width': 140, 'show-overflow-tooltip': true,
          formatter: (r, c, v, i) => this.$formatNameCode(v, r.currencyCode)
        },
        {
          key: 'categList', label: 'label_belong_category', 'width': 240, 'show-overflow-tooltip': true,
          formatter: (r, c, v, i) => v ? v.map(it => it.categoryName).join(" → ") : this.$tt("data_none")
        },
        { key: 'skuWeight', label: 'label_weight_unit', 'show-overflow-tooltip': true, keyShow: 'expandDesc', },
        {
          key: 'skuLength', label: 'label_length_unit', 'show-overflow-tooltip': true, keyShow: 'expandDesc',
        },
        {
          key: 'skuWidth', label: 'label_width_unit', 'show-overflow-tooltip': true, keyShow: 'expandDesc',
        },
        {
          key: 'skuHeight', label: 'label_height_unit', 'show-overflow-tooltip': true, keyShow: 'expandDesc',
        },
        {
          type: 'operate', key: 'operate', fixed: 'right', width: 190, operate: [
            {
              label: 'label_print',
              click: (row) => this.$refs.print_common_temp.show([row], { single: true }),
            },
          ],
        }
      ]
    },

    changeAutoPrint(e) {
      if (!this.autoPrint) {
        const printConfig = _.head(this.$refs.print_config_dialog.loadPrintConfig({ typeKey: "SKU" }))
        if (!printConfig || !printConfig.clientId || !printConfig.templateId) {
          this.autoPrint = false
          this.$refs.print_config_dialog.show()
          return
        } else {
          this.autoPrint = true
        }
      } else {
        this.autoPrint = false
      }
      this.configChange()
    },
    saveConfig() {
      const printConfig = _.head(this.$refs.print_config_dialog.loadPrintConfig({ typeKey: "SKU" }))
      if (!printConfig || !printConfig.clientId || !printConfig.templateId) {
      } else {
        this.autoPrint = true
        this.configChange()
      }
    },


    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let _list = ['packageNo', 'packageType', 'packageName', 'packageVolume', 'size', 'packageWeight']
      if (_list.includes(column.property) || column.type == 'operate') {
        return { rowspan: row.rowspan, colspan: 1 }
      }
    },

    copyToClip(text) {
      this.$copyToClip(text, this.$tt('label_has_copy'))
    },


    clearSkuCode() {
      this.searchCode = null
    },
    clearTrackItem() {
      this.trackItem = null
    },
    selectTrack(row) {
      this.trackItem = row
    },
    //扫描sku
    scanSkuCode() {

      this.$refs.formSearch.validate((valid) => {
        if (valid) {
          this.$ajax({
            url: "/wms-api/refund/WmsReturnQueryRpc/queryReturnSku.json",
            method: 'post', loading: true,
            data: {
              code: this.searchCode,
            },
            failure: () => {
              this.$refs.error_audio.play()
            },
            success: (res) => {
              if (res && res.data) {
                const item = res.data
                this.tableData.push(item)
                if (this.autoPrint) {
                  this.$refs.print_common_temp.printDefaultOption({
                    list: [item],
                    // url: "/print-api/template/PrintRpc/print.json",
                    // handler: (data, list) => {
                    //   data.metaDataList = list.map(it => ({
                    //     printNum: data.printNumSum,
                    //     metadata: _.pick(it, ["skuName", "skuNameEn", "skuOnlyCode"])
                    //   }))
                    //   return data
                    // },
                    // templateRequire: true
                  })
                }
              }
            },
          })
        } else {
          return false;
        }
      });

    },



  }
};

</script>
<style></style>
